<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt=""/>
      </div>
      <span class="logo" @click="goHome()">
        <i class="el-icon-pie-chart">&nbsp;Go+</i>
      </span>
      <span class="totalData">共乘车<span class="num">{{orderCount}}</span>人次,实现盈利<span class="num">{{incomeCount}}</span>元</span>

      <span class="title">Go+平台实时监控系统</span>
      <div class="title-right">
        <span class="datetime">{{nowTime}}</span>
        <span class="qiehuan"><img :src="changeSrc" class="" @click="handleChangeTheme()"/></span>
        <span class="btn-close">
            <i class="el-icon-circle-close " onclick="window.close()" style="margin-left: 5px;"></i>
        </span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('trend')" :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize">
            <!-- icon-express-alt -->
            <span @click="changeSize('seller')" :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize">
            <!-- icon-express-alt -->
            <span @click="changeSize('map')" :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <!-- icon-express-alt -->
            <span @click="changeSize('rank')" :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot>
          <div class="resize">
            <!-- icon-express-alt -->
            <span @click="changeSize('hot')" :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="right-bottom"  :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div class="resize">
            <!-- icon-express-alt -->
            <span @click="changeSize('stock')" :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Hot from '../components/Hot.vue'
import Map from '../components/Map.vue'
import Rank from '../components/Rank.vue'
import Seller from '../components/Seller.vue'
import Stock from '../components/Stock.vue'
import Trend from '../components/Trend.vue'
import {mapState} from "vuex";
import {getThemeValue} from "../utils/theme_utils";
export default {
  created(){
    //注册回调函数
    this.$socket.registerCallBack("totalCount",this.getOrderAndIncomeCount);
    this.$socket.registerCallBack("newOrder",this.getNewOrderMEssage);
  },
  data () {
    return {
      //定义每一个图表的全屏状态
      fullScreenStatus:{
        trend:false,
        seller:false,
        map:false,
        rank:false,
        hot:false,
        stock:false,
      },
      nowTime: new Date(),
      totalData:null,
      orderCount:0,
      incomeCount:0,
      //newOrder:null,
    }
  },
  computed:{
    /*路径里面的  /goingplus 是用户布署项目到tomcat之后要加上所在文件夹 */
    logoSrc () {
      return '/static/img/logo.png'
    },
    headerSrc () {
      return '/static/img/'+getThemeValue(this.theme).headerBorderSrc;
    },
    changeSrc () {
      return '/static/img/'+getThemeValue(this.theme).themeSrc;
    },
    containerStyle(){
      return{
        backgroundColor:getThemeValue(this.theme).backgroundColor,
        color:getThemeValue(this.theme).titleColor,
      }
    },
    ...mapState(['theme']),
  },
  mounted() {
    this.timer = setInterval(() => {
      this.nowTime = new Date(); // 每秒修改数据date
      //this.getOrderAndIncomeCount();                //------------------改成websocket
    }, 1000);
    //发送数据给服务器，告诉服务器，我现在需要数据
    this.$socket.send({
      action:'fullScreen',
      socketType:'totalCount',
      chartName:'count',
      value:''
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
    this.$socket.unRegisterCallBack("totalCount")
  },
  methods: {
    changeSize(chartName){
      //1.改变fullScreenStatus的数据
      this.fullScreenStatus[chartName]=!this.fullScreenStatus[chartName];
      //2.调用每一个图表组件的ScreenAdapter的方法
      this.$nextTick(()=>{
        //this.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，
        // 在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM
        this.$refs[chartName].screenAdapter();
      });
    },
    goHome(){
      let routeData = this.$router.resolve({
        path:'/menu/main',
      });
      window.open(routeData.href, '_blank');
    },
    handleChangeTheme(){
      //修改Vuex中的主题数据
      this.$store.commit('changeTheme');
    },
    getOrderAndIncomeCount(ret){
      /* await this.axios.get("/chart/totalCount").then(res=>{
         this.orderCount=res.data[0];
         this.incomeCount=res.data[1];
       });*/
      this.orderCount=ret[0];
      this.incomeCount=ret[1];
    },
    getNewOrderMEssage(ret){
      //console.log(ret.orid)
      //const h = this.$createElement;
      this.$notify({

        title: '您有新的订单信息',
        //message: h('i', { style: 'color: teal'},'订单详情  '+)
        dangerouslyUseHTMLString: true,
        message:'<strong><a href="/menu/order">订单详情</a> <i>'+ret.orid+'</i></strong>'
      });
    }
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend
  },
}
</script>
<style scoped>
  .screen-container{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: #161522;
    color: #fff;
    box-sizing: border-box;
    position: fixed;
  }
  .screen-header{
    width: 100%;
    height: 64px;
    font-size: 20px;
    position: relative;
  }
  .screen-header>div img{
    width: 100%;
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 23px;
    height: 21px;
    cursor: pointer;
  }
  .datetime{
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    cursor: pointer;
  }
  .logo :hover{
    color: #ffa825;
  }
  .logo img {
    height: 30px;
    width: 30px;
  }

  .totalData {
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-80%);
    font-size: 12px;
  }
  .num{
    font-size: 25px;
    font-weight: bold;
  }

  /*左中右组件*/
  .screen-body {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 10px;
  }
  .screen-left {
    height: 100%;
    width: 27.6%;
  }
  #left-top {
    height: 53%;
    position: relative;
  }
  #left-bottom {
    height: 31%;
    margin-top: 25px;
    position: relative;
  }

  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
  }
  #middle-top {
    width: 100%;
    height: 56%;
    position: relative;
  }
  #middle-bottom {
    margin-top: 25px;
    width: 100%;
    height: 28%;
    position: relative;
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
  }
  #right-top {
    height: 46%;
    position: relative;
  }
  #right-bottom {
    height: 38%;
    margin-top: 25px;
    position: relative;
  }
  /*放大小图标*/
  .resize{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }
  /*全屏的样式*/
  .fullscreen {
    position: fixed!important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
  }
  .btn-close{
    cursor: pointer;
  }
  .btn-close :hover{
    color: #ffa825;
  }



</style>
